<template>
  <div class="paymentSucess">
    <div class="bg">
      <div class="bgbox">
        <div class="price">
          <span class="sign">￥</span>
          <span>{{order.order_amount}}</span>
        </div>
        <div class="title">

          <!-- <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover" /> -->
          <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover"></van-image>

          <p>支付成功!</p>
        </div>
      </div>

    </div>
    <div class="box">

      <div class="detail">
        <div class="time">
          <p>支付时间</p>
          <p>{{ time}}</p>
        </div>
        <div class="code">
          <p>订单编号</p>
          <p>{{order?.orderno}}</p>
        </div>
      </div>
      <div class="btnlist">
        <van-button round class="return" @click="jump">返回</van-button>
        <van-button type="primary" class="check" round @click="selectOrderDetail">查看订单</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      order_id: this.$route.query.order_id || 400,
      detail: {},
      order: {},
      product: [],
      time: ""
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {
    this.getorderdetail()
  },
  methods: {
    //获取订单细节
    getorderdetail () {

      this.$axios
        .get(this.$api.getorderdetail, {
          params: {
            order_id: this.order_id
          },
        })
        .then((res) => {

          // this.detail = res.data.data.detail
          // this.order = res.data.data.order
          this.order = res.data.data.order
          this.product = res.data.data.productinfo

          this.time = this.$moment(this.order.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss')

        });
    },
    jump () {

      this.$router.push({
        name: 'home',

      })
    },
    // 订单详情
    selectOrderDetail () {
      this.$router.push({ name: 'orderDetail', query: { id: this.order.order_id } })

    }
  }
};
</script>
<style lang='less' scoped>
.paymentSucess {
  min-height: 100vh;
  background: #ffffff;
}
.bg {
  width: 100%;
  height: 139px;
  background: linear-gradient(135deg, #ff7733 0%, #ff4133 100%);
  border-radius: 0px 0px 16px 16px;
  opacity: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .price {
    font-size: 30px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    height: 40px;
    align-items: baseline;
    position: relative;
    padding-left: 20px;
    .sign {
      font-size: 20px;
      position: absolute;
      left: 0;
      bottom: 4px;
    }
  }
  .title {
    display: flex;
    align-items: center;

    p {
      margin-left: 6px;
      font-size: 20px;

      font-weight: bold;
      line-height: 0px;
      color: #f9c254;
    }
    /deep/ .van-image {
      width: 26px;
      height: 26px;
    }
  }
}
.paymentSucess {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box {
  position: relative;
  z-index: 1;
  width: 303px;
  height: 388px;
  margin: 0 auto;
  margin-top: -26px;
  background: url('../../assets/img/home/sucess.png') no-repeat;
  background-position: 100% 100%;
  background-size: cover;
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .price {
    margin-top: 70px;
    border-bottom: 1px dashed rgba(25, 23, 20, 0.102);
    text-align: center;
    width: 100%;
    div {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;

      color: #191714;
      margin-bottom: 36px;
    }
  }
  .detail {
    margin-top: 30px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 100%;
    color: rgba(25, 23, 20, 0.6);
    opacity: 1;
    p {
      margin: 0;
    }
    .time,
    .code {
      display: flex;
      justify-content: space-between;
    }
    .code {
      margin-top: 10px;
    }
  }
  .btnlist {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    button {
      margin-bottom: 12px;
      width: 100%;
    }
    .return {
      border: 1px solid #ff7733;
      color: #ff7733;
    }
    .check {
      border: 1px solid #ff7733;
      background: #ff7733;
    }
  }
}
</style>